<template>
  <lay-container fluid="true" class="page-box has-tree pa-12">
    <div class="left-tree">
      <lay-card>
        <template #title>
          机构列表
        </template>
        <template #footer>
          <lay-button fluid type="normal" size="sm" @click="toAdd">
            <lay-icon type="layui-icon-addition"></lay-icon>
            新建
          </lay-button>
        </template>

        <virt-tree
            v-show="!isFold"
            style="margin-top: 10px"
            :list="data"
            showLine
            selectable
            :field-names="{key: 'id'}"
        >
        </virt-tree>
      </lay-card>
    </div>

    <div class="page-box">
      <lay-card class="search-card">
        <template #title>
          用户管理
        </template>
        <template #extra>
          <lay-button
              style="margin-left: 20px"
              type="primary"
              size="sm"
              @click="toSearch"
          >
            查询
          </lay-button>
          <lay-button size="sm" @click="toReset"> 重置</lay-button>

        </template>
        <lay-form class="search-form" size="sm">
          <lay-row space="10">
            <lay-col :md="5">
              <lay-form-item label="用户账号" label-width="80">
                <lay-input
                    v-model="searchQuery.userAccount"
                    placeholder="请输入"
                    size="sm"
                    :allow-clear="true"
                    class="form-item"
                ></lay-input>
              </lay-form-item>
            </lay-col>
            <lay-col :md="5">
              <lay-form-item label="用户名" label-width="80">
                <lay-input
                    v-model="searchQuery.userName"
                    placeholder="请输入"
                    size="sm"
                    :allow-clear="true"
                    class="form-item"
                ></lay-input>
              </lay-form-item>
            </lay-col>
            <lay-col :md="5">
              <lay-form-item label="性别" label-width="80">
                <lay-select
                    class="form-item"
                    size="sm"
                    v-model="searchQuery.sex"
                    :allow-clear="true"
                    placeholder="请选择"
                >
                  <lay-select-option value="man" label="男"></lay-select-option>
                  <lay-select-option value="woman" label="女"></lay-select-option>
                </lay-select>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
      </lay-card>
      <!-- table -->
      <div class="table-box">
        <lay-table
            :page="page"
            :height="'100%'"
            :columns="columns"
            :loading="loading"
            :default-toolbar="true"
            :data-source="dataSource"
            v-model:selected-keys="selectedKeys"
            @change="change"
            @sortChange="sortChange"
        >
          <template #status="{ row }">
            <lay-switch
                :model-value="row.status"
                @change="changeStatus($event, row)"
            ></lay-switch>
          </template>
          <template #avatar="{ row }">
            <!--          <lay-avatar :src="row.avatar"></lay-avatar>-->
          </template>
          <template v-slot:toolbar>
            <lay-button size="sm" type="primary" @click="toAdd('新增')">
              <lay-icon class="layui-icon-addition"></lay-icon>
              新增
            </lay-button
            >
            <lay-button size="sm" @click="toRemove">
              <lay-icon class="layui-icon-delete"></lay-icon>
              删除
            </lay-button>
          </template>
          <template v-slot:operator="{ row }">
            <!--          <lay-button-->
            <!--              size="xs"-->
            <!--              type="primary"-->
            <!--              @click="changeVisible11('编辑', row)"-->
            <!--          >编辑-->
            <!--          </lay-button-->
            <!--          >-->
            <!--          <lay-popconfirm-->
            <!--              content="确定要删除此用户吗?"-->
            <!--              @confirm="confirm"-->
            <!--              @cancel="cancel"-->
            <!--          >-->
            <!--            <lay-button size="xs" border="red" border-style="dashed"-->
            <!--            >删除-->
            <!--            </lay-button-->
            <!--            >-->
            <!--          </lay-popconfirm>-->
          </template>
        </lay-table>
      </div>
    </div>

    <!--    <div style="display: flex">-->
    <!--      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">-->
    <!--        &lt;!&ndash; tree &ndash;&gt;-->
    <!--        <div v-show="!isFold">-->

    <!--        </div>-->


    <!--          </div>-->
    <!--      <div style="flex: 1; padding: 10px; over-flow: auto">-->
    <!--        &lt;!&ndash; table &ndash;&gt;-->
    <!--        <lay-card>-->
    <!--          <lay-form>-->
    <!--            <lay-row>-->
    <!--              <lay-col :md="5">-->
    <!--                <lay-form-item label="用户账号" label-width="80">-->
    <!--                  <lay-input-->
    <!--                    v-model="searchQuery.userAccount"-->
    <!--                    placeholder="请输入"-->
    <!--                    size="sm"-->
    <!--                    :allow-clear="true"-->
    <!--                    style="width: 98%"-->
    <!--                  ></lay-input>-->
    <!--                </lay-form-item>-->
    <!--              </lay-col>-->
    <!--              <lay-col :md="5">-->
    <!--                <lay-form-item label="用户名" label-width="80">-->
    <!--                  <lay-input-->
    <!--                    v-model="searchQuery.userName"-->
    <!--                    placeholder="请输入"-->
    <!--                    size="sm"-->
    <!--                    :allow-clear="true"-->
    <!--                    style="width: 98%"-->
    <!--                  ></lay-input>-->
    <!--                </lay-form-item>-->
    <!--              </lay-col>-->
    <!--              <lay-col :md="5">-->
    <!--                <lay-form-item label="性别" label-width="80">-->
    <!--                  <lay-select-->
    <!--                    class="search-input"-->
    <!--                    size="sm"-->
    <!--                    v-model="searchQuery.sex"-->
    <!--                    :allow-clear="true"-->
    <!--                    placeholder="请选择"-->
    <!--                  >-->
    <!--                    <lay-select-option-->
    <!--                      value="man"-->
    <!--                      label="男"-->
    <!--                    ></lay-select-option>-->
    <!--                    <lay-select-option-->
    <!--                      value="woman"-->
    <!--                      label="女"-->
    <!--                    ></lay-select-option>-->
    <!--                  </lay-select>-->
    <!--                </lay-form-item>-->
    <!--              </lay-col>-->
    <!--              <lay-col :md="5">-->
    <!--                <lay-form-item label-width="20">-->
    <!--                  <lay-button-->
    <!--                    style="margin-left: 20px"-->
    <!--                    type="normal"-->
    <!--                    size="sm"-->
    <!--                    @click="toSearch"-->
    <!--                  >-->
    <!--                    查询-->
    <!--                  </lay-button>-->
    <!--                  <lay-button size="sm" @click="toReset"> 重置 </lay-button>-->
    <!--                </lay-form-item>-->
    <!--              </lay-col>-->
    <!--            </lay-row>-->
    <!--          </lay-form>-->
    <!--        </lay-card>-->
    <!--        <lay-table-->
    <!--          :page="page"-->
    <!--          :height="'100%'"-->
    <!--          :columns="columns"-->
    <!--          :loading="loading"-->
    <!--          :default-toolbar="true"-->
    <!--          :data-source="dataSource"-->
    <!--          v-model:selected-keys="selectedKeys"-->
    <!--          @change="change"-->
    <!--          @sortChange="sortChange"-->
    <!--        >-->
    <!--          <template #status="{ row }">-->
    <!--            <lay-switch-->
    <!--              :model-value="row.status"-->
    <!--              @change="changeStatus($event, row)"-->
    <!--            ></lay-switch>-->
    <!--          </template>-->
    <!--          <template #role="{ row }">-->
    <!--            <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>-->
    <!--          </template>-->

    <!--          <template v-slot:toolbar>-->
    <!--            <lay-button-->
    <!--              size="sm"-->
    <!--              type="primary"-->
    <!--              @click="changeVisible11('新增', null)"-->
    <!--              >新增</lay-button-->
    <!--            >-->
    <!--            <lay-button size="sm" @click="toRemove">删除</lay-button>-->
    <!--          </template>-->
    <!--          <template v-slot:operator="{ row }">-->
    <!--            <lay-button-->
    <!--              size="xs"-->
    <!--              border="green"-->
    <!--              border-style="dashed"-->
    <!--              @click="changeVisible11('编辑', row)"-->
    <!--              >编辑</lay-button-->
    <!--            >-->
    <!--            <lay-popconfirm-->
    <!--              content="确定要删除此用户吗?"-->
    <!--              @confirm="confirm"-->
    <!--              @cancel="cancel"-->
    <!--            >-->
    <!--              <lay-button size="xs" border="red" border-style="dashed"-->
    <!--                >删除</lay-button-->
    <!--              >-->
    <!--            </lay-popconfirm>-->
    <!--          </template>-->
    <!--        </lay-table>-->
    <!--      </div>-->
    <!--    </div>-->
    <lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
      <div style="padding: 20px">
        <lay-form :model="model11" ref="layFormRef11" required>
          <lay-form-item label="用户账号" prop="account">
            <lay-input v-model="model11.account"></lay-input>
          </lay-form-item>
          <lay-form-item label="用户名" prop="name">
            <lay-input v-model="model11.name"></lay-input>
          </lay-form-item>
          <lay-form-item label="性别" prop="sex">
            <lay-select v-model="model11.sex" style="width: 100%">
              <lay-select-option value="男" label="男"></lay-select-option>
              <lay-select-option value="女" label="女"></lay-select-option>
            </lay-select>
          </lay-form-item>
          <lay-form-item label="角色" prop="role">
            <lay-input v-model="model11.role"></lay-input>
          </lay-form-item>
          <lay-form-item label="状态" prop="status">
            <lay-switch :model-value="model11.status"></lay-switch>
          </lay-form-item>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit"
          >保存
          </lay-button
          >
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>

    <lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
      <div style="padding: 20px">
        <lay-form :model="model22" ref="layFormRef11" required>
          <lay-row>
            <lay-col md="12">
              <lay-form-item label="上级机构" prop="organization">
                <lay-select v-model="model22.organization" style="width: 100%">
                  <lay-select-option value="1" label="研发部">
                  </lay-select-option>
                  <lay-select-option value="2" label="测试部">
                  </lay-select-option>
                  <lay-select-option value="3" label="设计部">
                  </lay-select-option>
                  <lay-select-option value="4" label="市场部">
                  </lay-select-option>
                  <lay-select-option value="5" label="运维部">
                  </lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="机构名称" prop="name">
                <lay-input v-model="model22.name"></lay-input>
              </lay-form-item>
              <lay-form-item label="机构全称" prop="fullName">
                <lay-input v-model="model22.fullName"></lay-input>
              </lay-form-item>
              <lay-form-item label="机构代码" prop="code">
                <lay-input v-model="model22.code"></lay-input>
              </lay-form-item>
            </lay-col>
            <lay-col md="12">
              <lay-form-item label="机构类型" prop="type">
                <lay-select v-model="model22.type" style="width: 100%">
                  <lay-select-option value="1" label="公司"></lay-select-option>
                  <lay-select-option value="2" label="子公司">
                  </lay-select-option>
                  <lay-select-option value="3" label="部门"></lay-select-option>
                  <lay-select-option value="4" label="小组"></lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="排序号" prop="sort">
                <lay-input-number
                    style="width: 100%"
                    v-model="model22.sort"
                    position="right"
                ></lay-input-number>
              </lay-form-item>
              <lay-form-item label="备注" prop="remark">
                <lay-textarea
                    placeholder="请输入备注"
                    v-model="model22.remark"
                    :rows="4"
                ></lay-textarea>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit"
          >保存
          </lay-button
          >
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
import {layer} from '@layui/layui-vue'
import {VirtTree} from "@/components/VirtTree";

const data = ref([
  {
    title: 'xxxx公司',
    id: 1,
    checked: true,
    children: [
      {
        title: '研发部',
        id: 2,
        children: [
          {
            title: '研发一部',
            id: 3
          },
          {
            title: '研发二部',
            id: 4
          },
          {
            title: '研发三部',
            id: 5
          }
        ]
      },
      {
        title: '测试部',
        id: 6,
        children: [
          {
            title: '测试一部',
            id: 7,
            disabled: true
          },
          {
            title: '测试二部',
            id: 8
          }
        ]
      },
      {
        title: '设计部',
        id: 9
      },
      {
        title: '市场部',
        id: 10
      }
    ]
  }
])
const showLine = ref(false)
const selectedKey = ref('')
const selectedNode = ref({
  id: 0,
  title: ''
})
const isFold = ref(false)
const searchQuery = ref({
  userAccount: '',
  userName: '',
  sex: ''
})

function toReset() {
  searchQuery.value = {
    userAccount: '',
    userName: '',
    sex: ''
  }
}

function handleClick(node: any) {
  selectedNode.value = JSON.parse(JSON.stringify(node))
  page.current = selectedNode.value.id
  change(page)
}

function toAdd() {
  visible22.value = true
}

function toEdit() {
  model22.value = {
    organization: '1',
    name: '研发部',
    fullName: 'xxxx公司-研发部',
    code: '001',
    type: '1',
    sort: 1,
    remark: '备注'
  }
  visible22.value = true
}

function toDelete() {
  if (selectedKey.value == '') {
    layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
      icon: 3,
      time: 2000
    })
    return
  }
  layer.confirm(
      '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
      {
        title: '提示',
        btn: [
          {
            text: '确定',
            callback: (id: any) => {
              layer.msg('您已成功删除')
              layer.close(id)
            }
          },
          {
            text: '取消',
            callback: (id: any) => {
              layer.msg('您已取消操作')
              layer.close(id)
            }
          }
        ]
      }
  )
}

function toSearch() {
  page.current = 1
  change(page)
}

const loading = ref(false)
const selectedKeys = ref()
const page = reactive({current: 1, limit: 10, total: 100})
const columns = ref([
  {title: '选项', width: '55px', type: 'checkbox', fixed: 'left'},
  {title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id'},
  {title: '用户账号', width: '80px', key: 'account', sort: 'account'},
  {title: '用户名', width: '80px', key: 'name', sort: 'name'},
  {title: '性别', width: '80px', key: 'sex', sort: 'sex'},
  {title: '角色', width: '120px', key: 'role', customSlot: 'role'},
  {
    title: '创建时间',
    width: '120px',
    key: 'joinTime'
  },
  {title: '状态', width: '120px', key: 'status', sort: 'status'},

  {
    title: '操作',
    width: '150px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right'
  }
])
const change = (page: any) => {
  loading.value = true
  setTimeout(() => {
    dataSource.value = loadDataSource(page.current, page.limit)
    loading.value = false
  }, 1000)
}
const sortChange = (key: any, sort: number) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}
const dataSource = ref([
  {
    id: '1',
    name: '管理员',
    sex: '男',
    role: '管理员',
    account: 'admin',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '2',
    name: '张三2',
    sex: '男',
    role: '普通用户',
    account: '用户2',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '3',
    name: '李四3',
    sex: '男',
    role: '普通用户',
    account: '用户3',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '4',
    name: '用户4',
    sex: '男',
    role: '普通用户',
    account: '用户4',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '5',
    name: '王五5',
    sex: '男',
    role: '普通用户',
    account: '用户5',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '6',
    name: '赵六6',
    sex: '男',
    role: '普通用户',
    account: '用户6',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '7',
    name: '黄齐7',
    sex: '男',
    role: '普通用户',
    account: '用户7',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '8',
    name: '用户8',
    sex: '男',
    role: '普通用户',
    account: '用户8',
    joinTime: '2022-02-09 18:34:56',
    status: true
  },
  {
    id: '9',
    name: '游客9',
    sex: '男',
    role: '游客',
    account: '游客9',
    joinTime: '用户22-02-09 18:34:56',
    status: true
  },
  {
    id: '10',
    name: '用户10',
    sex: '女',
    role: '普通用户',
    account: 'user10',
    joinTime: '2022-02-09 18:34:56 18:34:56',
    status: true
  }
])
const changeStatus = (isChecked: boolean, row: any) => {
  dataSource.value.forEach((item) => {
    if (item.id === row.id) {
      layer.msg('Success', {icon: 1}, () => {
        item.status = isChecked
      })
    }
  })
}
const remove = () => {
  layer.msg(selectedKeys.value, {area: '50%'})
}
const loadDataSource = (page: number, pageSize: number) => {
  var response = []
  var startIndex = (page - 1) * pageSize + 1
  var endIndex = page * pageSize
  for (var i = startIndex; i <= endIndex; i++) {
    response.push({
      id: `${i}`,
      account: `user${i}`,
      sex: '男',
      name: `用户${i}`,
      joinTime: '2022-02-09 18:34:56',
      role: '普通用户',
      status: true
    })
  }
  return response
}
const model11 = ref({
  name: '',
  role: '',
  sex: '',
  status: '',
  account: ''
})
const layFormRef11 = ref()
const visible11 = ref(false)
const title = ref('新增')
const changeVisible11 = (text: any, row: any) => {
  title.value = text
  if (row != null) {
    let info = JSON.parse(JSON.stringify(row))
    model11.value = info
  } else {
    model11.value = {
      name: '',
      role: '',
      sex: '',
      status: '',
      account: ''
    }
  }
  visible11.value = !visible11.value
}
const submit11 = function () {
  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
    layer.open({
      type: 1,
      title: '表单提交结果',
      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
          model
      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
      shade: false,
      isHtmlFragment: true,
      btn: [
        {
          text: '确认',
          callback(index: any) {
            layer.close(index)
          }
        }
      ],
      area: '500px'
    })
  })
}
// 清除校验
const clearValidate11 = function () {
  layFormRef11.value.clearValidate()
}
// 重置表单
const reset11 = function () {
  layFormRef11.value.reset()
}

function toRemove() {
  if (selectedKeys.value.length == 0) {
    layer.msg('您未选择数据，请先选择要删除的数据', {icon: 3, time: 2000})
    return
  }
  layer.confirm('您将删除所有选中的数据？', {
    title: '提示',
    btn: [
      {
        text: '确定',
        callback: (id: any) => {
          layer.msg('您已成功删除')
          layer.close(id)
        }
      },
      {
        text: '取消',
        callback: (id: any) => {
          layer.msg('您已取消操作')
          layer.close(id)
        }
      }
    ]
  })
}

function toSubmit() {
  layer.msg('保存成功！', {icon: 1, time: 1000})
  visible11.value = false
  visible22.value = false
}

function toCancel() {
  visible11.value = false
  visible22.value = false
}

function confirm() {
  layer.msg('您已成功删除')
}

function cancel() {
  layer.msg('您已取消操作')
}

const model22 = ref({
  organization: '',
  name: '',
  fullName: '',
  code: '',
  type: '',
  sort: 0,
  remark: ''
})
const layFormRef22 = ref()
const visible22 = ref(false)
const title22 = ref('新建')
</script>

<style scoped>
.organization-box {
  width: calc(100vw - 240px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}


/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  position: relative;
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>
